<template>
  <div>
    <h3 class="store-summary">时间：<span>{{ruleForm.weekBegin}}</span> —— <span>{{ruleForm.weekEnd}}</span> </h3>

    <!-- 搜索部分 -->
    <div class="tableSearch">
      <el-form size="mini" :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="商品名称：" label-width="100px">
          <el-input v-model="ruleForm.goodsName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类：" label-width="120px">
          <el-cascader change-on-select v-model="ruleForm.primaryClassifyId" :options="options" placeholder="请选择"></el-cascader>
        </el-form-item>
        <el-form-item label="门店：" label-width="100px" prop="shopId">
          <el-select v-model="ruleForm.shopId" placeholder="请选择">
            <el-option v-for="item in storeArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="35px">
          <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        </el-form-item>
        <el-form-item label="" label-width="15px">
          <el-button type="primary" v-if="setRole('导出')" @click="handleOutput()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 门店汇总数据-表格 -->
    <el-table :data="tableData">
      <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="primaryClassifyName" label="商品分类" align="center"></el-table-column>
      <el-table-column prop="goodsSaleCount" label="商品销售数量" align="center"></el-table-column>
      <el-table-column prop="repertoryNum" label="库存数量" align="center"></el-table-column>
      <el-table-column prop="storeCoverRate" label="库存覆盖率" align="center"></el-table-column>
    </el-table>
    <page-unit :pageData="pageData" :func="_stockCoverRate"></page-unit>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "@/components/Page";
import dateClass from "@/util/date.js";
import u from "@/util";
import {
  stockCoverRate,
  getGoodsClassifyTreeList,
  selectBaseShopPageList,
  exportStockCoverRate // 导出
} from "@/api/index.js";
const date = new dateClass()
const fileDownload = require("js-file-download");

export default {
  computed: mapState(["sub", "merchantId", "power","isShop", "linkName"]),
  components: { pageUnit },
  data () {
    return {
      ruleForm: {
        goodsName: '',
        primaryClassifyId: [''],
        shopId: '',
        weekBegin: '',
        weekEnd: '',
      },
      options: [],  // 商品分类数组
      storeArr: [],  // 门店数组
      tableData: [],  // 筛选出商品的数组
      exportData: {},  // 导出数据条件
      pageData: {
        pageSize: 10,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      rules: {
        shopId: [{ required: true, message: '请选择一个门店', trigger: 'change' }],
      },
    }
  },
  mounted () {
    this.init()
    this._selectBaseShopPageList()  // 获取门店
    this._getGoodsClassifyTreeList()  // 获取商品分类
  },
  methods: {
    // 权限配置
    setRole (key) {
      return u.selectTitle(this.power, key)
    },

    init () {
      this.ruleForm.weekBegin = date.getLastWeekMonday()
      this.ruleForm.weekEnd = date.getLastWeekSunday()
      let d = new Date()
      console.log(date.timestampToTime(d.getTime()))
    },

    // 获取门店
    _selectBaseShopPageList () {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: 3
      }).then(res => {
         let isStore = {
          id: this.merchantId,
          name: this.linkName
        };
        this.storeArr = res.data.list
        if (this.isShop == "0") {
          this.storeArr.unshift(isStore);
          this.ruleForm.shopId = isStore.id;
        }
      })
    },

    // 获取商品分类
    _getGoodsClassifyTreeList () {
      getGoodsClassifyTreeList().then(res => {
        let a = {
          value: "",
          label: "全部",
        }
        res.data.unshift(a)
        this.options = res.data
      })
    },

    // 查询
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.pageData.currentPage = 1
          this._stockCoverRate(this.pageData.pageSize, 1)
        } else {
          return false
        }
      });
    },
    _stockCoverRate (pageSize, pageNum) {
      let postPrimaryClassifyId = this.ruleForm.primaryClassifyId[this.ruleForm.primaryClassifyId.length-1] || '';
      let data = {
        shopId: this.ruleForm.shopId,
        startDate: this.ruleForm.weekBegin,
        endDate: this.ruleForm.weekEnd,
        goodsName: this.ruleForm.goodsName,
        classifyId: postPrimaryClassifyId,
        pageSize: pageSize,
        pageNum: pageNum
      }
      this.exportData = JSON.parse(JSON.stringify(data))
      stockCoverRate(data).then(res => {
        this.tableData = res.data.list
        this.pageData.totalItems = res.data.total
      })
    },

    // 导出
    handleOutput () {
      if (this.tableData.length === 0) {
        this.$message.error("数据为空不能导出");
      } else {
        delete this.exportData.pageSize
        delete this.exportData.pageNum
        exportStockCoverRate(this.exportData).then(res => {
          let fileName = "库存覆盖率统计表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
  }
}
</script>

<style lang="less" scoped>
.store-summary {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
}
</style>
